<template>
    <div class="app-container">
        <el-card shadow="never" v-loading="loading">
            <el-row :gutter="5">
                <el-col :span="24" class="main-card-view">
                    <el-row>
                        <el-card shadow="never" class="top-search-view-card">
                            <el-row>
                                <el-form :inline="true" :model="searchForm" class="demo-form-inline search-view">
                                    <el-form-item label="关键字搜索">
                                        <el-input v-model="searchForm.region" placeholder="关键字搜索"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="handleSearch" class="search-button">查询</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-row>
                        </el-card>
                    </el-row>

                    <el-row>
                        <el-card shadow="never">
                            <el-table :data="tableData" :stripe="true" style="width: 100%">

                                <el-table-column prop="avatar" align="center" label="用户头像">
                                    <template slot-scope="{row}">
                                        <el-image :src="row.avatar" style="width: 50px;height: 50px;" />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="nickname" align="center" label="用户昵称" />
                                <el-table-column prop="expertImg" align="center" label="关注专家图像" >
                                    <template slot-scope="{row}">
                                        <el-image :src="row.expertImg" style="width: 50px;height: 50px;" />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="expertName" align="center" label="关注专家名称" />
                                <el-table-column prop="createTime" align="center" label="关注专家时间" />
                            </el-table>
                            <XPagination ref="pageInfo" :total="total" :get-data="getList" />
                        </el-card>
                    </el-row>
                </el-col>
            </el-row>
        </el-card>

    </div>
</template>

<script>
import XPagination from "../../components/xpagination/XPagination";
import * as follow from "../../api/follow.js"
export default {
    name: "list",
    components: { XPagination },
    data () {
        return {
            searchForm: {
                userName: "",
                region: ""
            },
            tableData: [],
            loading: false,
            dialogVisible: false,
            total: 0,
        }
    },
    methods: {
        getList (pageInfo) {
            const param = {
                ...this.searchForm,
                ...pageInfo
            }
            follow.queryByPage(param).then(response => {
                console.log(response)
                this.tableData = response.data.data.rows
                this.total = response.data.data.total
                this.loading = false
            }).catch(error => {
                console.log(error)
            })
        },
        handleSearch () {
            this.$refs.pageInfo.loadData()
        },
    },
    mounted () {
        this.handleSearch()
    }
}
</script>

<style scoped lang="scss"></style>
